<template>
    <!-- <div>
        订单
    </div> -->
    <panel title="订单管理">
        <el-form>
            <el-form-item label="订单号" label-width="80px">
                <el-input placeholder="请输入订单号" auto-complete="off" v-model="searchInfo.orderNo"></el-input>
            </el-form-item>
            <el-form-item label="收货人" label-width="80px">
                <el-input placeholder="请输入收货人" auto-complete="off" v-model="searchInfo.consignee"></el-input>
            </el-form-item>
            <el-form-item label="手机号" label-width="80px">
                <el-input placeholder="请输入手机号" auto-complete="off" v-model="searchInfo.phone"></el-input>
            </el-form-item>

            <el-form-item label="订单状态" label-width="80px">
                <el-select placeholder="请选择订单状态" v-model="searchInfo.orderState">
                    <el-option label="已受理" value="已受理"></el-option>
                    <el-option label="派送中" value="派送中"></el-option>
                    <el-option label="已完成" value="已完成"></el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="选择时间" label-width="80px">
                <el-date-picker v-model="searchInfo.date" type="datetimerange" :picker-options="pickerOptions"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="medium " @click="orderlist" type="primary">查询</el-button>
            </el-form-item>

        </el-form>
        <el-table :data="orderlistData">

            <el-table-column prop="orderNo" label="订单号"></el-table-column>
            <el-table-column prop="orderTime" label="下单时间" width="160">
                <template slot-scope="{row}">
                    {{ row.orderTime | timedate }}
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="联系电话"></el-table-column>
            <el-table-column prop="consignee" label="收货人"></el-table-column>
            <el-table-column prop="deliverAddress" label="送货地址"></el-table-column>
            <el-table-column prop="deliveryTime" label="送达时间" width="160">
                <template slot-scope="{row}">
                    {{ row.deliveryTime | timedate }}
                </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注"></el-table-column>
            <el-table-column prop="orderAmount" label="订单金额"></el-table-column>
            <el-table-column prop="orderState" label="订单状态"></el-table-column>

            <el-table-column prop="operation" label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>

            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pageSize"
                :current-page="pageInfo.currentPage" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @current-change="pageChange" @size-change="sizeChange">
            </el-pagination>
        </div>
    </panel>
</template>

<script>
import { orderlistReq } from '@/api/account.api'
import { clearObject } from '@/utils/common'
import dayjs from 'dayjs';
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],

            },
            tableData: {
            },
            pageInfo: {
                currentPage: 1,
                pageSize: 5
            },
            searchInfo: {
                orderNo: '',
                orderTime: '',
                phone: '',
                consignee: '',
                deliverAddress: '',
                deliveryTime: '',
                remarks: '',
                orderAmount: '',
                orderState: '',
                date: ''
            },
            orderlistData: [],
            total: null
        }
    },
    methods: {
        handleClick(row) {
            console.log(row);
        },
        orderlist() {
            // 数据合并
            const params = { ...this.pageInfo, ...this.searchInfo }
            // 数据清洗
            clearObject(params)
            if (params.date) {
                params.date = JSON.stringify(params.date.map(item => dayjs(item).format('YYY-MM-DD HH:mm:ss')))
            }

            orderlistReq(params).then((res) => {
                console.log(res);
                this.orderlistData = res.data.data
                this.total = res.data.total
            })
        },
        pageChange(currentPage) {
            // 改变页码
            this.pageInfo.currentPage = currentPage
            this.orderlist()
        },
        sizeChange(pageSize) {
            // 改变页码
            this.pageInfo.pageSize = pageSize
            this.orderlist()
        }

    },
    created() {
        this.orderlist()
    },
    filters: {
        timedate(val) {
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
        }
    }
}
</script>

<style lang="less" scoped>
.el-input {
    width: 200px;
    // height: 40px;
}

.el-form {
    // display: flex;
}

.el-form-item {
    display: inline-block;
}
</style>